<template>
    <div class="block">
        <el-timeline>
            <el-timeline-item timestamp="2018/4/12" placement="top">
                <el-card>
                    <div class="middle-box">
                        <div class="information" >
                            <label>姓名:</label>
                            <span>{{orderData.orderUserName}}</span>
                        </div>
                        <div class="information">
                            <label>时间:</label>
                            <span>{{orderData.orderTime}}</span>
                        </div>
                        <div class="information">
                            <label>保单类型:</label>
                            <span>{{orderData.orderType}}</span>
                        </div>
                        <div class="information">
                            <label>保单名字:</label>
                            <span>{{orderData.orderName}}</span>
                        </div>
                        <div class="information">
                            <label>保单金额:</label>
                            <span>{{orderData.orderPrice}}</span>
                        </div>
                        <div class="information">
                            <label>受理人:</label>
                            <span>{{orderData.orderSales}}</span>
                        </div>
                        <el-collapse accordion>
                            <el-collapse-item title="退保申请进度">
                                <div class="block">
                                    <el-timeline>
                                        <el-timeline-item
                                            v-for="(
                                                activity, index
                                            ) in activities"
                                            :key="index"
                                            :icon="activity.icon"
                                            :type="activity.type"
                                            :color="activity.color"
                                            :size="activity.size"
                                            :timestamp="activity.timestamp"
                                        >
                                            {{ activity.content }}
                                        </el-timeline-item>
                                    </el-timeline>
                                </div>
                            </el-collapse-item>
                            
                        </el-collapse>
                    </div>
                </el-card>
            </el-timeline-item>
        </el-timeline>
    </div>
</template>

<script>
import axios from"axios";
export default {
     created() {
        this.updateOrderById();
    },
    data() {
        return {
            activeName: "1",
            orderData:[],
            activities: [
                {
                    content: "正在申请中...",
                    timestamp: "2018-04-12 20:46",
                    color:'green',
                    size: "large",
                    type: "primary",
                    icon: "el-icon-more",
                },
                {
                    content: "等待管理员受理",
                    color:'green',
                    timestamp: "2018-04-03 20:46",
                    color: "#0bbd87",
                },
                {
                    content: "后台已受理",
                    timestamp: "2018-04-03 20:46",
                    size: "large",
                },
                {
                    content: "退保成功",
                    timestamp: "2018-04-03 20:46",
                },
            ],
        };
    },
    methods:{
           async updateOrderById(){                               
            const {data} = await axios({
                url:'/orders/updateOrdersId',
                method: "get",
                params:{
                   _id : this.$route.query.id
                }
            }); 
            console.log(data.data,1111);                    
            if ({data:[data],status}){
                console.log(data.data[0]);
               this.orderData = data.data[0];
            }
        },
    }
};
</script>

<style lang="scss">
.middle-box {
    width: 80%;
    margin: 40px auto;
    .information {
        height: 40px;
        labal {
            font-size: 20px;
        }
        span {
            display: inline-block;
            width: 200px;
            // border-bottom: 1px solid rgb(235, 229, 229);
            padding-left: 10px;
            line-height: 30px;
        }
    }
    .el-collapse-item__header{
        border: none;
        font-size: 16px;
        font-weight: 700;
    }
    .el-timeline{
        padding-left: 4px;
    }
}
</style>
